<template>
  <div class="popular_box">
    <!-- 移动端用 swiper -->
    <swiper v-if="isMobile" :slidesPerView="3" :grid="{ rows: 3, fill: 'row' }" :slidesPerGroup="9"
      :pagination="{ clickable: true }" :scrollbar="{ draggable: true, dragSize: dynamicDragSize }" :modules="modules"
      class="mySwiper">
      <swiper-slide v-for="(item, index) in list" :key="index">
        <!-- <Card :item="item.title" /> -->
        <li class="novel_li">
          <div>
            <div class="state">连载中</div>
            <div class="cover_box">
              <a href="/novel/intro?id=985768219669303296" title="在古罗马当奴隶主">
                <img class="cover" :src="item.img">
              </a>
            </div>
            <div class="brief_box">
              <div class="title">
                <a href="/novel/intro?id=985768219669303296" title="在古罗马当奴隶主">{{ item.title }}</a>
              </div>
              <div class="info_box">
                <div class="author">{{ item.author }}</div>
                <div class="view">
                  <img src="/image/view.svg">
                  <span>{{ item.viewCount }}</span>
                </div>
              </div>
              <div class="info_box">
                <div class="author">4天前</div>
                <div class="view">
                  <img src="/image/option_collect.svg">
                  <span>984</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </swiper-slide>
    </swiper>

    <!-- PC端用网格 -->
    <div v-else class="h_scroll_box">
      <ul class="popular_3_list">
        <template v-for="item in list">
            <Block :item="item"/>
        </template>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination, Grid, Scrollbar } from 'swiper/modules'
import Block from './Block.vue';
import 'swiper/css';
import 'swiper/css/grid';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

const modules = [Grid, Pagination, Scrollbar];

// 模拟你的数据
const list = ref([
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  },
  {
    id: "985768219669303296",
    title: "在古罗马当奴隶主",
    author: "维修斯",
    viewCount: "102K",
    updateTime: "4天前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/4e4c39f96b744beeaa99655e026af995.webp"
  },
  {
    id: "979883737686872064",
    title: "借种换亲",
    author: "逍遥老道",
    viewCount: "247K",
    updateTime: "1周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/762c460bea254287bbbed55f5f0c72b2.webp"
  },
  {
    id: "896633419390390272",
    title: "魅惑都市",
    author: "水门大官人",
    viewCount: "305K",
    updateTime: "3周前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/24c92a6a4fea4c868dff416c0da068d8.webp"
  },
  {
    id: "825238749041528832",
    title: "家有美母",
    author: "天涯海角",
    viewCount: "204K",
    updateTime: "1个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/861512920633315328.webp"
  },
  {
    id: "11303329",
    title: "豪乳老师刘艳",
    author: "tttjjj_200",
    viewCount: "3.51M",
    updateTime: "2个月前",
    img: "https://cdn.uaa010.com/file/bucket-media/image/cover/860083634709860352.webp"
  }
])

const isMobile = ref(false)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

const dynamicDragSize = ref(150)

// 动态更新dragSize
const updateDragSize = () => {
  nextTick(() => {
    const swiperWrapper = document.querySelector('.mySwiper .swiper-wrapper')
    const swiperContainer = document.querySelector('.mySwiper')

    if (swiperWrapper && swiperContainer) {
      const contentHeight = swiperWrapper.scrollHeight
      const wrapperHeight = swiperContainer.clientHeight

      if (contentHeight > wrapperHeight) {
        // 让滚动条长度按比例变化，最低给30px，不然太小
        dynamicDragSize.value = Math.max(30, (wrapperHeight / contentHeight) * wrapperHeight)
      } else {
        // 内容没超出，不需要滚动
        dynamicDragSize.value = 0
      }
    }
  })
}

onMounted(() => {
  updateDragSize()
  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.mySwiper {
  padding: 0 0 25px 8px;
}

:deep(.mySwiper .swiper-scrollbar) {
  background: rgba(0, 0, 0, 0.1);
  height: 6px;
  border-radius: 10px;
}

:deep(.mySwiper .swiper-scrollbar-drag) {
  background: #eeeeee;
  border-radius: 10px;
}
</style>
